<template>
  <div class="left">
    <div class="row1">
      <div class="title_name">
        <span>产品介绍</span><span class="eng">Product introduction</span>
      </div>
      <div class="row_box">
        产业国区作为产业集群的重要裁休和组成部分国区经济效应已引起越来越多人关注。国内外产业园区发展成功案例表明，产业园区能够有效地创造聚集力，通过共享资源、克服外部负效应，带动关联产业的发展，从而有效地推动产业集群的形成。产业园区所具有的性质和特征决定了产业集群最终方向，形成产业园区和产业集群的良性互动，是区城经济增长的重要途径。
      </div>
    </div>
    <div class="row2">
      <div class="title_name">
        <span>区域优势</span
        ><span class="eng">Implementation of industrial layout</span>
      </div>
      <div class="tab_box">
        <div class="tab_title">交通优势</div>
        <div class="box_row1">
          <img src="../../public/img/distant.png" class="distant" />
          <div class="box_row1_name">距离</div>
          <div class="box_row1_name">北京市</div>
          <div class="box_row1_title">895 <span class="km">千米</span></div>
        </div>
        <div class="icon_box">
          <iconBox :list = "list" type = "van_l" class="icon_row_box"></iconBox>
        </div>
        <div class="tab_title tab_st">区域资源</div>
        <div class="item_box">
          <div class="item_bar1">
            <div class="item_name1">区域规划面积</div>
            <div class="item_num">5000<span class="fix_name">种</span></div>
          </div>
          <div class="item_bar1">
            <div class="item_name1">附近人口数量</div>
            <div class="item_num">89<span class="fix_name">万</span></div>
          </div>
        </div>
      </div>
    </div>
    <div class="row3">
      <div class="title_name">
        <span>政策优势</span
        ><span class="eng">Policy advantages</span>
      </div>
      <div class="bigbox">
        <div id="loop"></div>
        <div class="item_box_1">
          <div class="item_bar1">
            <div class="item_name1">累计相关政策数量</div>
            <div class="item_num">8956<span class="fix_name">条</span></div>
          </div>
          <div class="item_bar1">
            <div class="item_name1">近1年新增相关政策</div>
            <div class="item_num">100<span class="fix_name">条</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="right">
    <div class="r_row1">
      <div class="title_name">
        <span>园区建筑概览</span
        ><span class="eng">Overview of park buildings</span>
      </div>
      <div class="bigbox">
        <div id="loop1"></div>
        <div class="item_box_1">
          <div class="item_bar1">
            <div class="item_name1">产业类型数量</div>
            <div class="item_num">89<span class="fix_name">个</span></div>
          </div>
          <div class="item_bar1">
            <div class="item_name1">产业总营收</div>
            <div class="item_num">89<span class="fix_name">亿</span></div>
          </div>
        </div>
      </div>
    </div>
    <div class="r_row2">
      <div class="title_name">
        <span>企业与人才管理优势</span
        ><span class="eng">Advantages of enterprise and</span>
      </div>
      <div class="icon_box">
          <iconBox :list="list1" class="icon_row_box"></iconBox>
        </div>
    </div>
    <div class="r_row3">
      <div class="title_name">
        <span>基建优势</span
        ><span class="eng">Infrastructure advantages</span>
      </div>
      <div class="bigbox">
        <div class="item_box_1">
          <div class="item_bar1">
            <div class="item_name1">基建总数</div>
            <div class="item_num">89<span class="fix_name">个</span></div>
          </div>
          <div class="item_bar1">
            <div class="item_name1">增加</div>
            <div class="item_num">10<span class="fix_name">个</span></div>
          </div>
        </div>
        <div id="line"></div>
        <div id="loop2"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getLoop, getLoop1, getLoop2, getLoop3, getLoop4, brokenLine } from "@/utils/getecharts"
import iconBox from "./iconBox.vue"
export default {
  components:{
    iconBox
},
  data() {
    return {
      list: [
        { num: 76, dw: "条", name: "半小时内的高速数量" },
        { num: 88, dw: "个", name: "两小时内的机场数量" },
        { num: 56, dw: "个", name: "一小时内的机场数量" },
        { num: 10, dw: "分钟", name: "最快上高速时间" },
        { num: 10, dw: "分钟", name: "最快到机场时间" },
        { num: 10, dw: "分钟", name: "最快到高铁站时间" }
      ],
      list1: [
        { num: 76, dw: "个", name: "园区企业" },
        { num: 88, dw: "个", name: "500强企业" },
        { num: 56, dw: "个", name: "上市企业" },
        { num: 10, dw: "个", name: "明星企业" },
        { num: 10, dw: "个", name: "风云人物" }
      ]
    }
  },
  methods:{

  },
  mounted(){
    echarts.init(document.getElementById("loop")).dispose()
    var myChart = echarts.init(document.getElementById('loop'));
    getLoop2(myChart)
    echarts.init(document.getElementById("loop1")).dispose()
    var myChart = echarts.init(document.getElementById('loop1'));
    getLoop3(myChart)
    echarts.init(document.getElementById("loop2")).dispose()
    var myChart = echarts.init(document.getElementById('loop2'));
    getLoop4(myChart)
    echarts.init(document.getElementById("line")).dispose()
    var myChart = echarts.init(document.getElementById('line'));
    brokenLine(myChart)
  }
}
</script>

<style scoped>
.row1 {
  width: 407px;
  height: 177px;
  background: url("../../public/img/bigtitle.png") no-repeat;
  background-size: cover;
  z-index: -1;
  margin-left: 30px;
}
.row2 {
  width: 407px;
  height: 414px;
  background: url("../../public/img/title.png") no-repeat;
  background-size: cover;
  z-index: -1;
  margin-left: 30px;
}
.row3{
  width: 407px;
  height: 326px;
  background: url("../../public/img/title.png") no-repeat;
  background-size: cover;
  z-index: -1;
  margin-left: 30px;
}
.title_name {
  width: 100%;
  height: 50px;
  font-size: 22px;
  color: white;
  font-weight: bolder;
  box-sizing: border-box;
  padding: 10px 10px 10px 20px;

  z-index: 5;
}
.eng {
  font-size: 14px;
  margin-left: 10px;
}
.row_box {
  font-size: 13px;
  box-sizing: border-box;
  padding: 10px;
  color: white;
}
.tab_title {
  width: 131px;
  height: 20px;
  color: white;
  font-size: 14px;
  background: url("../../public/img/s_title.png") no-repeat;
  background-size: cover;
  box-sizing: border-box;
  line-height: 10px;
  padding-left: 10px;
  margin-left: 10px;
  margin-top: 20px;
}
.box_row1 {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.distant {
  width: 18px;
  height: 21px;
  margin-left: 75px;
}
.box_row1_name {
  margin-left: 10px;
  margin-right: 30px;
  font-size: 15px;
  color: white;
}
.box_row1_title {
  font-size: 22px;
  color: rgba(3, 248, 255, 1);
}
.km {
  font-size: 12px;
  color: rgba(255, 255, 255, 1);
}
.icon_row_box{
  width: 120px;
  height: 35px;
}

.icon_box {
  display: flex;
  flex-wrap: wrap;
  margin-left: 10px;
  margin-bottom: 10px;
}
.icon_row {
  display: flex;
  align-items: center;
}
.img_box {
  width: 30px;
  height: 30px;
}
.text_num {
  font-size: 21px;
  color: rgba(3, 248, 255, 1);
  margin-left: -10px;
}
.text_name {
  font-size: 13px;
  color: rgba(254, 253, 253, 1);
  margin-left: 5px;
  /* position: absolute;
  top: 18px;
  left: 70px; */
}
.btm_row {
  font-size: 10px;
  color: rgba(254, 253, 253, 1);
  /* margin-top: -10px; */
}
.tab_st {
  margin-top: 30px;
}
.item_box {
  display: flex;
}
.item_box_1{
  
  display: flex;
}
.item_bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 30px;
  margin-top: 20px;
}
.item_bar1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* margin-left: 30px; */
  margin-top: 20px;
}
.item_num {
  margin-top: 10px;
  width: 180px;
  height: 48px;
  background: url("../../public/img/num.png") no-repeat;
  background-size: cover;
  text-align: center;
  line-height: 48px;
  font-size: 25px;
  color: rgba(20, 255, 223, 1);
}
.item_name1 {
  font-size: 14px;
  color: white;
}
.fix_name {
  font-size: 16px;
  line-height: 48px;
  color: white;
  margin-left: 10px;
}
#loop{
  width: 272px;
  height: 160px;
  margin-left: 40px;
  /* margin-top: 10px;  */
}
#loop1{
  width: 267px;
  height: 144px;
  margin-left: 40px;
  /* margin-top: 10px;  */
}
#loop2{
  width: 267px;
  height: 144px;
  margin-left: 40px;
  /* margin-top: 10px;  */
}
#line{
  width: 349px;
  height: 133px;
  margin-left: 20px;
}
.right {
  position: absolute;
  right: 30px;
  top: 110px;
}
.r_row1 {
  width: 407px;
  height: 305px;
  background: url("../../public/img/title.png") no-repeat;
  background-size: cover;
  z-index: -1;
}
.r_row2 {
  width: 407px;
  height: 144px;
  background: url("../../public/img/title.png") no-repeat;
  background-size: cover;
  z-index: -1;
}
.r_row3{
   width: 407px;
  height: 451px;
  background: url("../../public/img/title.png") no-repeat;
  background-size: cover;
  z-index: -1;
}
</style>